<template>
	<view>
		<view class="uni-list">
			<block v-for="(value, index) in listData" :key="index">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="value.thumb"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{ value.title }}</view>
							<view class="uni-media-list-text-bottom">
								<text>{{ value.author_name }}</text>
								<text>{{ value.create_time }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				current_page: 1,
				last_page: '',
				listData: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			};
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.getList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.current_page++
			if (this.current_page <= this.last_page) {
				this.getList();
			} else {
				this.status = 'nomore';
				uni.showToast({
					title: '已加载全部',
					duration: 500
				})
			}
		},
		methods: {
			getList() {
				this.status = 'loading';
				var data = {
					column: 'id,category_id,title,author_name,thumb,create_time', //需要的字段名
					page: this.current_page,
					limit: 10
				};
				uni.request({
					url: this.$host + '/articles',
					data: data,
					success: res => {
						if (res.statusCode == 200) {
							let list = res.data.data;
							this.current_page = list.current_page;
							this.last_page = list.last_page;
							this.listData = this.listData.concat(list.data);
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			goDetail: function(e) {
				let detail = {
					id: e.id,
					author: e.user.nickname,
					title: e.title,
					thumb: e.thumb,
					create_time: e.create_time
				};
				uni.navigateTo({
					url: 'detail?payload=' + encodeURIComponent(JSON.stringify(detail))
				});
			}
		}
	};
</script>

<style lang="scss">
	.uni-media-list-logo {
		width: 180rpx;
		height: 140rpx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 74rpx;
		font-size: 28rpx;
		overflow: hidden;
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
